<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>麦味·酒店预订·确认订单</title>
    <meta name="description" content="">
    <meta name="keywords" content="">


    <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700" rel="stylesheet">

    <link rel="stylesheet" href="/assets/css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/assets/css/animate.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons/css/ionicons.min.css">

    <link rel="stylesheet" href="/assets/css/owl.carousel.min.css">

    <link rel="stylesheet" href="/assets/fonts/flaticon/font/flaticon.css">

    <link rel="stylesheet" href="/assets/fonts/fontawesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="/assets/css/select2.css">


    <link rel="stylesheet" href="/assets/css/helpers.css">
    <link rel="stylesheet" href="/assets/css/style.css">

    <style type="text/css">
        table, th, td {
            border: 1px solid #E4E4E4;
        }

        table {
            width: 100%;
        }

        a.ex2:hover, a.ex2:active {
            color: #149d5b;
            font-size: 120%;
        }

    </style>

</head>
<body>


<nav class="navbar navbar-expand-lg navbar-dark probootstrap_navbar" id="probootstrap-navbar">
    <div class="container">
        <a class="navbar-brand" href="/index">My Way</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#probootstrap-menu"
                aria-controls="probootstrap-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span><i class="ion-navicon"></i></span>
        </button>
        <div class="collapse navbar-collapse" id="probootstrap-menu">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="/index">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="/userorder">我的订单</a></li>
                <li class="nav-item"><a class="nav-link" href="/enter" id="denglu">登录</a></li>
                <li class="nav-item"><a class="nav-link" href="/register" id="zhuce">注册</a></li>
                <script>
                    var name = "uName";//Cookies名字
                    this.GetCookie = function (name) {
                        var ck = document.cookie;
                        var exp1 = new RegExp(name + "=.*?(?=;|$)");
                        var mch = ck.match(exp1);
                        return mch ? unescape(mch[0].substring(name.length + 1)) : null;
                    }
                    if (GetCookie(name) != null) {
                        document.getElementById("denglu").innerText = "您好，" + GetCookie(name);
                        document.getElementById("denglu").removeAttribute("href");
                        document.getElementById("zhuce").innerText = "退出登录";
                        document.getElementById("zhuce").href = "/enter/logout";
                    }
                </script>
            </ul>
        </div>
    </div>
</nav>
<!-- END nav -->
<script>
    var name = "uName";//Cookies名字
    GetCookie = function (name) {
        var ck = document.cookie;
        var exp1 = new RegExp(name + "=.*?(?=;|$)");
        var mch = ck.match(exp1);
        return mch ? unescape(mch[0].substring(name.length + 1)) : null;
    }
    if (GetCookie(name) == null) {
        alert("您还没登录");
        window.location.href = "http://localhost:8280/enter";
    }
</script>

<section class="probootstrap-cover overflow-hidden relative" style="background-image: url('/assets/images/bg_1.jpg');"
         data-stellar-background-ratio="0.5" id="section-home">
    <div class="overlay"></div>
    <div class="container">

        <h2 class="display-4 border-bottom probootstrap-section-heading text-center">确认订单</h2>

        <div class="media probootstrap-media d-flex align-items-stretch mb-4 probootstrap-animate fadeInUp probootstrap-animated">
            <div class="media-body">
                <div class="row">
                    <div class="col-md-5 probootstrap-form" style="margin:auto;">
                        <p>酒店名：<span th:text="${hotelName}"></span></p>
                        <p><span th:text="${arr}" id="arr"></span>到<span th:text="${dep}" id="dep"></span>&nbsp;共<span
                                th:text="${nNight}" id="b"></span>晚</p>
                        <p><span th:text="${roomType}"></span>&nbsp;<span th:text="${breakfast}"></span></p>
                        <p><span th:text="${result}"></span></p>
                        <p>单价：<span id="oneprice" th:text="${oneprice}"></span>元</p>
                        <p id="rem" name="quantity" th:text="'该房间还剩'+${remain}+'间'"></p>
                    </div>
                    <div class="col-md-5 probootstrap-form" style="margin:auto;">
                        <form id="order" action="/roomorder/sure" ,method="post">
                            <p>入住信息填写：</p>
                            <label for quantity>房间数：</label>
                            <label for="quantity">
                                <select class="js-example-basic-single js-states form-control"
                                        style="width:60px;" name="quantity" id="quantity">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                </select>
                            </label>
                            <br>
                            <label for guest_name>入住人：</label>
                            <label for guest_name>
                                <input type="text" class="form-control" required="true" id="uName" name="uName">
                            </label>
                            <br>
                            <label for guest_phone>手机号：</label>
                            <label for guest_phone>
                                <input type="text" class="form-control" required="true" id="uPhone" name="uPhone">
                            </label>

                        </form>
                    </div>
                </div>
                <div class="col-md-11" style="margin:auto;">

                    <br>
                    <label>总价：<span id="total_price"></span></label>
                    <button id="btn1" style="color: #fff;background-color: #00CA4C;border-color: #00CA4C;float: right;"
                            onclick="buy()">确认订单
                    </button>
                </div>


                <div class="col-md">
                    <br>
                    <br>
                    <p><a class="ex2" style="float:right;" href="javascript:history.back(-1)">返回酒店详情</a></p>
                    <br>
                    <p><a class="ex2" style="float:right;" href="http://localhost:8280">返回首页</a></p>
                </div>
            </div>

        </div>
    </div>
    </br></br></br></br></br></br></br>
    <div class="col-md-12 text-center">
        <p style="color:white;" class="probootstrap_font-14">Copyright © 2019 . My Way 麦味 · 酒店订购</p>
    </div>
</section>
<!-- END section -->

<script src="/assets/js/jquery.min.js"></script>

<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/owl.carousel.min.js"></script>

<script src="/assets/js/jquery.waypoints.min.js"></script>
<script src="/assets/js/jquery.easing.1.3.js"></script>

<script src="/assets/js/select2.min.js"></script>

<script src="/assets/js/main.js"></script>

<script th:inline="javascript">

    var x = [[${remain}]];
    $('#quantity').change(function () {
       if($('#quantity').val()>x)
       {
           alert("只剩下"+x+"间房了，不能再订更多了。")
           $('#quantity').val(x);
       }
       else
           return;
    });


</script>

<script>
    /**/

    var quantity = document.getElementById("quantity");
    quantity.onchange = function () {
        var num = document.getElementById("quantity").value;
        var price = [[${oneprice}]];
        var total_price = document.getElementById("total_price");
        total_price.innerHTML = price * num + "元";//改变总价
    }

    $(document).ready(function () {
        var num = document.getElementById("quantity").value;
        var price = [[${oneprice}]];
        var total_price = document.getElementById("total_price");
        total_price.innerHTML = price * num + "元";//改变总价
    });

</script>
<script th:inline="javascript">
    /*创表并提交
    * 需要日期，roomid，name，phone*/
    var name = "uId";//Cookies名字
    this.GetCookie = function (name) {
        var ck = document.cookie;
        var exp1 = new RegExp(name + "=.*?(?=;|$)");
        var mch = ck.match(exp1);
        return mch ? unescape(mch[0].substring(name.length + 1)) : null;
    }

    function sure() {
        var makeForm = document.getElementById("order");
        var input1 = document.createElement("input");
        var input2 = document.createElement("input");
        var input3 = document.createElement("input");
        var input4 = document.createElement("input");
        var input5 = document.createElement("input");

        input1.type = "text";
        input1.name = "roomId";
        input1.value = [[${roomId1}]];
        input1.style.display = "none";

        input2.type = "text";
        input2.name = "arr";
        input2.value = [[${arr}]];
        input2.style.display = "none";

        input3.type = "text";
        input3.name = "dep";
        input3.value = [[${dep}]];
        input3.style.display = "none";

        input4.type = "text";
        input4.name = "uId";
        input4.value = GetCookie(name);
        input4.style.display = "none";

        input5.type = "text";
        input5.name = "oneprice";
        input5.value = [[${oneprice}]];
        input5.style.display = "none";

        makeForm.appendChild(input1);
        makeForm.appendChild(input2);
        makeForm.appendChild(input3);
        makeForm.appendChild(input4);
        makeForm.appendChild(input5);

        makeForm.method = "post";
        makeForm.action = "/roomorder/sure";
        makeForm.submit();
    }
</script>

<script>
    function buy() {
        var btn1 = document.getElementById("btn1");
        var quan = document.getElementById("quantity");
        var gname = document.getElementById("uName");
        var gphone = document.getElementById("uPhone");
        var gbtn = document.getElementById("gbtn");
        var order = document.getElementById("order");
        if (btn1.innerHTML.match("确认订单")) {
            if (gname.value == "" || gname.value == null) {
                window.alert("请填写入住人姓名！");
            }
            else if (gphone.value == "" || gphone.value == null) {
                window.alert("请填写入住人手机号！");
            }
            else {
                btn1.innerHTML = "支付";
                quan.disabled = true;
                gname.disabled = true;
                gphone.disabled = true;
                gbtn.disabled = true;
            }
        }
        else {
            quan.disabled = false;
            gname.disabled = false;
            gphone.disabled = false;
            sure();
            /// /order.submit();
        }
    };

</script>
</body>
</html>